JavaScript y D3

IIC2026 2020-2

DOM

JavaScript y D3

IIC2026 2020-2

Document Object Model


Forma de representar el contenido de un documento HTML como objeto de programación.

Document Object Model



<!DOCTYPE html>
<html>
  ...
</html>
          

Document Object Model



<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
  </body>
</html>
          

Document Object Model



<!DOCTYPE html>
<html>
  <head>
    ...
  </head>

  <body>
    ...
  </body>
</html>
          

Document Object Model



(Fuente: DOM en Wikipedia)

Document Object Model



            console.log(document.URL);

            document.children; // [<html>]
          

Document Object Model



            const elemento = document.getElementById("identificador");
          

Document Object Model



            const elemento = document.getElementById("identificador");
          


            const parrafo = document.createElement("p");
          

Document Object Model



            const elemento = document.getElementById("identificador");
          


            const parrafo = document.createElement("p");
            const texto = document.createTextNode("¡Soy texto!");
          

Document Object Model



            const elemento = document.getElementById("identificador");
          


            const parrafo = document.createElement("p");
            const texto = document.createTextNode("¡Soy texto!");
            parrafo.appendChild(texto);
          

Document Object Model



            const elementoRaiz = document.getElementById("raiz");

            const parrafo = document.createElement("p");
            const texto = document.createTextNode("¡Soy texto!");
            parrafo.appendChild(texto);

            elementoRaiz.appendChild(parrafo);
          

Document Object Model



            // Define una única clase a elemento
            elemento.className = "importante";
          

            // Agrega una clase al elemento
            elemento.classList.add("otra clase");

            // Remueve una clase al elemento
            elemento.classList.remove("otra clase");
          

            // Define una único id a elemento
            elemento.id = "principal";
          

Document Object Model



            // Conecta ocurrencia de evento sobre elemento a función
            elemento.addEventListener(evento, funcion);
          

Document Object Model



            const raiz = document.getElementById("raiz");
            const principal = document.getElementById("principal");
            
            let contador = 0;
            
            principal.addEventListener("click", () => {
              contador += 1;
            
              const parrafo = document.createElement("p");
              const texto = document.createTextNode(`Número de clics: ${contador}`);
              parrafo.appendChild(texto);
            
              raiz.appendChild(parrafo);
            });            
          

DOM

JavaScript y D3

IIC2026 2020-2


¡Deja tus preguntas en los comentarios!